<template>
  <view class="page page-activity-view has-fixed-footer">
    <view class="page-header">
      <image class="activity-banner" :src="activityData.cover"></image>
      <view class="activity-type" :class="`type${activityData.discountType}`" v-if="activityData.discountType">{{ ACTIVITY_DISCOUNT_TYPE[activityData.discountType].name }}</view>
    </view>
    <view class="page-content">
      <view class="activity-header">
        <view class="activity-title">
          <view class="activity-title-text">{{ activityData.name }}</view>
          <fui-tag v-if="activityData.status" :text="ACTIVITY_STATUS[activityData.status].name" :padding="['10rpx', '15rpx']" :background="ACTIVITY_STATUS[activityData.status].background" :color="ACTIVITY_STATUS[activityData.status].color"></fui-tag>
        </view>
        <view class="activity-info">
          <view class="activity-info-text">
            <fui-icon class="activity-info-icon" customPrefix="iconfont" name="vms-icon-kaishishijian" size="32" color="var(--fui-color-primary)"></fui-icon>
            <fui-text text="活动开始时间:" :padding="[0, '10rpx']" size="24" color="#999"></fui-text>
            <fui-text :text="utils.dateFormatter(activityData.startTime, 'y/m/d h:i', 2, true)" size="24" color="#333"></fui-text>
          </view>
          <view class="activity-info-text">
            <fui-icon class="activity-info-icon" customPrefix="iconfont" name="vms-icon-jieshushijian" size="32" color="var(--fui-color-primary)"></fui-icon>
            <fui-text text="活动结束时间:" :padding="[0, '10rpx']" size="24" color="#999"></fui-text>
            <fui-text :text="utils.dateFormatter(activityData.endTime, 'y/m/d h:i', 2, true)" size="24" color="#333"></fui-text>
          </view>
          <view class="activity-info-text">
            <fui-icon class="activity-info-icon" customPrefix="iconfont" name="vms-icon-kaishishijian" size="32" color="var(--fui-color-primary)"></fui-icon>
            <fui-text text="报名开始时间:" :padding="[0, '10rpx']" size="24" color="#999"></fui-text>
            <fui-text :text="utils.dateFormatter(activityData.applyStartTime, 'y/m/d h:i', 2, true)" size="24" color="#333"></fui-text>
          </view>
          <view class="activity-info-text">
            <fui-icon class="activity-info-icon" customPrefix="iconfont" name="vms-icon-jieshushijian" size="32" color="var(--fui-color-primary)"></fui-icon>
            <fui-text text="报名结束时间:" :padding="[0, '10rpx']" size="24" color="#999"></fui-text>
            <fui-text :text="utils.dateFormatter(activityData.applyEndTime, 'y/m/d h:i', 2, true)" size="24" color="#333"></fui-text>
          </view>
          <view class="activity-info-text">
            <fui-icon class="activity-info-icon" customPrefix="iconfont" name="vms-icon-liwuhuodong" size="32" color="var(--fui-color-primary)"></fui-icon>
            <fui-text text="活动范围:" :padding="[0, '10rpx']" size="24" color="#999"></fui-text>
            <fui-text v-if="activityData.productScope" :text="ACTIVITY_GOODS_RANGE[activityData.productScope].name" size="24" color="#333"></fui-text>
          </view>
        </view>
      </view>
      <view class="activity-panel">
        <fui-text text="满减门槛及优惠" size="28" fontWeight="bold"></fui-text>
        <view class="activity-discount">
          <view class="activity-discount-item" v-for="(item, index) in discountList" :key="index">
            <view class="discount-item-text">消费满 {{ item.startNum }} {{ ACTIVITY_DISCOUNT_TYPE[activityData.discountType].aUnit }}</view>
            <view class="discount-item-text"><fui-text :text="ACTIVITY_DISCOUNT_TYPE[activityData.discountType].cLabel" size="24" color="#666"></fui-text></view>
            <view class="discount-item-text" v-if="activityData.discountType === 21"><fui-text text="￥" size="24" color="#666"></fui-text>{{ item.discountNum }}</view>
            <view class="discount-item-text" v-if="activityData.discountType === 22">{{ item.discountNum * 10 }}<fui-text text="%" size="24" color="#666"></fui-text></view>
          </view>
        </view>
      </view>
      <view class="activity-panel" v-if="activityData.description">
        <fui-text text="活动描述" size="28" fontWeight="bold"></fui-text>
        <view class="activity-description">
          {{ activityData.description }}
        </view>
      </view>
    </view>
    <view class="page-footer ui-fixed-footer ui-fixed-footer__white">
      <fui-button v-if="(activityData.status === 11 && !isStartApply) || activityData.status === 13 || activityData.status === 14" text="删除" class="ui-btn-danger_plain" height="78rpx" @click="handleDelete"></fui-button>
      <fui-button v-if="activityData.status === 11" text="编辑" class="ui-btn-primary_plain" height="78rpx" @click="tab.navigateTo(editLink)"></fui-button>
      <fui-button v-if="activityData.status === 11 || activityData.status === 12" text="暂停" type="warning" height="78rpx" @click="handleChangeStatus(13)"></fui-button>
      <fui-button v-if="activityData.status === 13" text="继续" type="success" height="78rpx" @click="handleChangeStatus(12)"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ACTIVITY_DISCOUNT_TYPE, ACTIVITY_STATUS, ACTIVITY_GOODS_RANGE } from './consts'
import utils from '@/components/firstui/fui-utils'
import activityApi from '@/api/activity/supply'

const tab = inject('$tab')
const modal = inject('$modal')

const activityId = ref('')
const productScope = ref('')
onLoad(option => {
  activityId.value = option.activityId
  productScope.value = option.productScope
})

onShow(() => {
  getActivityDetail()
})

const editLink = computed(() => `/pages/activity/supply/form?activityId=${activityId.value}`) // 编辑

// 活动详情
const activityData = ref({})
const isStartApply = computed(() => {// 活动报名开始状态
  const nowTime = new Date().getTime()
  return activityData.value.applyStartTime && nowTime >= activityData.value.applyStartTime
})
const discountList = ref([])
const getActivityDetail = () => {
  modal.loading('加载中...')
  try {
    activityApi.getActivityDetail(activityId.value).then(res => {
      modal.closeLoading()
      if (res.code === 0 && res.data) {
        activityData.value = res.data
        const resList = res.data.discountRules.split(',')
        const list = resList.map(item => {
          return {
            startNum: item.split('-')[0],
            discountNum: item.split('-')[1]
          }
        })
        discountList.value = list
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch(err){
    modal.closeLoading()
    modal.msgError(err)
  }
}

// 更改状态：暂停/继续
const handleChangeStatus = (status) => {
  modal.confirm(`您确认要${ACTIVITY_STATUS[status].opText}活动“${activityData.value.name}”？`).then(() => {
    try {
      activityApi.updateActivityStatus({
        id: activityId.value,
        status
      }).then(res => {
        if (res.code === 0) {
          modal.msgError(`活动【${activityData.value.name}】已${ACTIVITY_STATUS[status].opText}！`)
          getActivityDetail()
        } else {
          modal.msgError(`活动【${activityData.value.name}】${ACTIVITY_STATUS[status].opText}失败！`)
        }
      })
    } catch (err) {
      modal.msgError(err)
    }
  })
}

// 删除活动
const handleDelete = () => {
  modal.confirm(`您确认要删除活动“${activityData.value.name}”？`).then(() => {
    try {
      activityApi.deleteActivity(activityId.value).then(res => {
        if (res.code === 0 && res.data) {
          modal.msgError(`活动【${activityData.value.name}】已删除！`)
          tab.navigateBack()
        } else {
          modal.msgError(`活动【${activityData.value.name}】删除失败！`)
        }
      })
    } catch (err) {
      modal.msgError(err)
    }
  })
}
</script>

<style lang="scss" scoped>
.page-activity-view {
  .page-header {
    position: relative;
    .activity-banner {
      width: 100%;
      height: 400rpx;
      overflow: hidden;
    }
    .activity-type {
      position: absolute;
      z-index: 10;
      top: 24rpx;
      left: 0;
      border-top-right-radius: 12rpx;
      border-bottom-right-radius: 12rpx;
      padding: 16rpx 36rpx;
      font-size: 32rpx;
      font-weight: bold;
      &.type21 {
        background-color: #ffd492;
        color: #D97D14;
      }
      &.type22 {
        background-color: #f8886b;
        color: #C71313;
      }
    }
  }
  .page-content {
    padding: 24rpx 36rpx;
    .activity-header {
      .activity-title {
        position: relative;
        margin-bottom: 32rpx;
        padding-right: 120rpx;
        .activity-title-text {
          font-size: 32rpx;
          font-weight: bold;
        }
        .fui-tag__wrap {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
    .activity-info {
      .activity-info-text {
        display: flex;
        margin-bottom: 10rpx;
      }
    }
    .activity-panel {
      margin-top: 42rpx;
      .activity-discount {
        margin-top: 24rpx;
        .activity-discount-item {
          display: flex;
          justify-content: space-between;
          margin: 10rpx 0;
          padding: 10rpx 32rpx;
          &:nth-child(odd) {
            background-color: #f8f8f8;
          }
          .discount-item-text {
            flex: 1;
            font-size: 24rpx;
            color: #333;
            &:nth-child(2) {
              flex: 0 0 25%;
              text-align: center;
            }
            &:nth-child(3) {
              flex: 0 0 25%;
              text-align: right;
            }
          }
        }
      }
      .activity-description {
        margin-top: 24rpx;
        padding: 0 16rpx;
        font-size: 24rpx;
        color: #666;
        text-indent: 48rpx;
      }
    }
  }
  .page-footer {
    display: flex;
    justify-content: flex-end;
    box-shadow: 0 0 6px rgb(0 0 0 / 12%);
    .fui-button__wrap {
      flex: 0 0 calc(25% - 20rpx);
      margin: 0 10rpx !important;
    }
  }
}
</style>